<template>
  <div class="card-container">
    <!-- 搜索区域 -->
    <div class="search-container">
      <span class="search-label">车牌号码：</span>

      <el-input
        v-model.trim="searchs.carNumber"
        clearable
        placeholder="请输入内容"
        class="search-main"
      />
      <span class="search-label">车主姓名：</span>

      <el-input
        v-model.trim="searchs.personName"
        clearable
        placeholder="请输入内容"
        class="search-main"
      />
      <span class="search-label">状态：</span>

      <el-select v-model="searchs.cardStatus">
        <el-option
          v-for="item in cardStatusList"
          :key="item.id"
          :value="item.id"
          :label="item.name"
        />
      </el-select>

      <el-button type="primary" class="search-btn" @click="doSearch"
        >查询</el-button
      >
    </div>

    <!-- 新增删除操作区域 -->
    <div class="create-container">
      <auth-button btn-string="park:enterprise:add_edit">
      <el-button type="primary" @click="toRot">添加月卡</el-button>

      </auth-button>
      
      <el-button @click="delList">批量删除</el-button>
    </div>

    <!-- 表格区域 -->
    <div class="table">
      <el-table style="width: 100%" :data="cardList" tooltip-effect="dark" @selection-change="handleSelectionChange">
        <el-table-column
      type="selection"
      width="55">
    </el-table-column>
        <el-table-column label="序号">
          <template slot-scope="scope">
          {{ params.pageSize*(params.page-1)+scope.$index + 1 }}
        </template>
        </el-table-column>
        <el-table-column prop="personName" label="车主名称" />
        <el-table-column prop="phoneNumber" label="联系方式" />
        <el-table-column prop="carNumber" label="车牌号码" />
        <el-table-column prop="carBrand" label="车辆品牌" />
        <el-table-column prop="totalEffectiveDate" label="剩余有效天数" />
        <el-table-column
          label="状态"
          prop="cardStatus"
          :formatter="formatStatus"
        />
        <el-table-column label="操作"  width="180">
          <template #default="scope">
            <el-button
              size="mini"
              type="text"
              @click="handle('renew', scope.row)"
              >续费</el-button
            >

            <el-button
              size="mini"
              type="text"
              @click="handle('look', scope.row)"
              >查看</el-button
            >

            <el-button
              size="mini"
              type="text"
              @click="handle('edit', scope.row)"
              >编辑</el-button
            >

            <el-button size="mini" type="text" @click="handle('del', scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="page-container">
      <el-pagination
      @size-change="handleSizeChange"
      @current-change="pageChange"
      :current-page="params.page"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="params.pageSize"
      layout="total,  prev, pager, next, sizes, jumper"
      :total="total"
    >
    </el-pagination>
    </div>
  </div>
</template>


<script>
import { getCardList, delCardAPI } from "@/api/card";
import { Message } from "element-ui";
export default {
  data() {
    return {
      txtList:[
        {name:"renew",value:'月卡续费',text:'月卡缴费信息'},
        {name:"edit",value:'编辑月卡',text:'最近一次月卡缴费信息'},
        {name:"look",value:'查看详情',text:'月卡缴费记录'},
      ],
      idList:[],
      cardList: [],
      id: 1,
      total: 0,
      params: {
        page: "1",
        pageSize: "10",
        carNumber: "",
        personName: "",
        cardStatus: "",
      },
      searchs: {
        carNumber: null,
        personName: null,
        cardStatus: null,
      },
      cardStatusList: [
        {
          id: null,
          name: "全部",
        },
        {
          id: 0,
          name: "可用",
        },
        {
          id: 1,
          name: "已过期",
        },
      ],
    };
  },
  async created() {
    this.render();
  },
  methods: {
    handleSelectionChange(res){
      this.idList = res.map(item=>item.id)
    },
    async delList(){
      try{
        if(this.idList.length === 0){
          Message.error("请选择月卡");
          return;
        }else{
          await this.$confirm("确定删除所有选中的月卡吗?")
          await Promise.all(this.idList.map(item=>delCardAPI(item)))
          Message.success("全部删除成功");
          this.render();
        }
      }catch(err){
        Message.error("删除失败，请重试");
      }
    },
    toRot() {
      this.$store.commit("user/setDisab",false);
      this.$store.commit("user/setTxt", '添加月卡');
      this.$store.commit("user/setFlag", true);
      this.$store.commit("user/setTxtStr", "最新一次月卡缴费信息");
      this.$router.push("/parking/AddCard");
    },
    doSearch() {
      this.params.carNumber = this.searchs.carNumber;
      this.params.personName = this.searchs.personName;
      this.params.cardStatus = this.searchs.cardStatus;
      this.render();
    },
    formatStatus(row) {
      const MAP = {
        0: "可用",
        1: "已过期",
      };
      return MAP[row.cardStatus];
    },
    async render() {
      const res = await getCardList(this.params);
      this.cardList = res.data.rows;
      this.total = res.data.total;
    },
    pageChange(page) {
      this.params.page = page;
      this.render();
    },
    handleSizeChange(pageSize) {
      this.params.pageSize = pageSize;
      this.render();
    },
    async delCard(id) {
      try{
        await this.$confirm("确定删除该月卡吗?")
      await delCardAPI(id);
      Message.success("删除成功");
      this.render();
      }catch(err){
        console.log(err);
      }
    },
    handle(str, res) {
      if (str === "renew" || str === "edit" || str === "look") {
        const {value,text} = this.txtList.find(item=>item.name===str)
        this.$store.commit("user/setTxt",value);
        this.$store.commit("user/setTxtStr",text);
        this.$store.commit("user/setDisab",str === "renew");
        this.$store.commit("user/setFlag", str !== "look");
        this.$router.push({
          path: "/parking/AddCard",
          query: {
            id: res.id,
          },
        });
      } else if (str === "del") {
        this.delCard(res.id);
      }
    },
  },
};
</script>


<style lang="scss" scoped>
.card-container {
  padding: 20px;
  background-color: #fff;
}

.search-container {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgb(237, 237, 237, 0.9);
  padding-bottom: 20px;
  .search-main {
    width: 220px;
    margin-right: 10px;
  }
  .search-btn {
    margin-left: 20px;
  }
}
.create-container {
  margin: 20px 0px;
}
.page-container {
  padding: 4px 0px;
  text-align: right;
}
.form-container {
  padding: 0px 80px;
}
::v-deep .el-table__header-wrapper th {
  background-color: #f4f6f8;
}
::v-deep .el-pagination {
  margin-top: 30px;
  text-align: right;
}
</style>

